import React from "react";
import { NavBar, Icon } from 'antd-mobile';
class ShopHeader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      opacity: 0,
      height: 0
    }
  }
  render() {
    let { height } = this.state;
    return height === 0 ? "" : <div className="ion-header" style={{ opacity: this.state.opacity, height }}>
      <NavBar
        mode="dark"
        icon={<Icon type="left" />}
        onLeftClick={() => {
          window.history.back(-1);
        }}
      >
        {this.props.title}
      </NavBar>
    </div>
  }
  throttle = function (func, delay) {
    var prev = Date.now();
    var _this = this;
    return function () {
      var now = Date.now();
      if (now - prev >= delay) {
        func(_this);
        prev = Date.now();
      }
    }
  }
  handle(_this) {
    console.log(1)
    let scrollTop = document.documentElement.scrollTop ||
      window.pageYOffset ||
      document.body.scrollTop;
    let _opacity = scrollTop / 200;
    let height = scrollTop > 45 ? 45 : scrollTop
    _this.setState({ opacity: _opacity, height })
  }
  componentWillMount() {
    var _this = this;
    window.addEventListener('scroll', _this.throttle(_this.handle, 10));
  }
  componentWillUnmount() {
    this.setState = (state, callback) => {
      return
  }
  }
}
export default ShopHeader;
